import { StyleSheet, View, Modal, Pressable, Text } from 'react-native';
import React, { useRef, useEffect, useState } from 'react';
import { ImageZoom } from '@likashefqet/react-native-image-zoom';
import { px2dp, scale } from '~/utils/px2dp';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
import Video from 'react-native-video';

type Category = 'video' | 'image';

interface Props {
    visible: boolean;
    toggleVisible: Function;
    url: string;
    category?: Category;
}
export default function ImageViewModal(props: Props) {
    const { visible, toggleVisible, url, category = 'image' } = props;
    const modalizeRef = useRef<any>(null);
    const [animationType, setAnimationType] = useState('fadeIn');
    const [paused, setPaused] = useState(false);
    useEffect(() => {
        if (visible) {
            setAnimationType('fadeInUp');
        }
        modalizeRef.current?.fadeInUp(500);
    }, [visible]);
    const closeModal = () => {
        setPaused(true);
        setAnimationType('fadeOutDownBig');
        setTimeout(() => {
            toggleVisible && toggleVisible();
        }, 500);
    };
    return (
        <Modal visible={visible} transparent={true} statusBarTranslucent={true} hardwareAccelerated={true}>
            <Pressable style={styles.modal}>
                <Animatable.View style={styles.modalContent} ref={modalizeRef} animation={animationType} duration={500}>
                    {category == 'image' ? (
                        <View style={[styles.modal_header]}>
                            <Pressable onPress={closeModal}>
                                <Icon
                                    name="close-outline"
                                    size={26}
                                    color={category == 'image' ? '#fff' : '#000'}></Icon>
                            </Pressable>
                        </View>
                    ) : (
                        <Pressable style={[styles.modal_close]} onPress={closeModal}>
                            <Text style={styles.closeText}>关闭</Text>
                        </Pressable>
                    )}

                    {category == 'image' ? (
                        <ImageZoom style={styles.images} uri={url} />
                    ) : (
                        <Video
                            paused={paused}
                            source={{ uri: url }}
                            resizeMode={'cover'}
                            style={styles.backgroundVideo}
                            volume={1}
                            progressUpdateInterval={150}
                            disableFocus={true}
                            repeat={true}
                            ignoreSilentSwitch="obey"
                            playWhenInactive={false}
                            playInBackground={false}
                        />
                    )}
                </Animatable.View>
            </Pressable>
        </Modal>
    );
}

const styles = StyleSheet.create({
    modal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
    },
    modalContent: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    images: {
        width: px2dp(500),
        height: px2dp(500),
        resizeMode: 'contain',
    },
    modal_header: {
        position: 'absolute',
        top: '10%',
        zIndex: 99999,
    },
    backgroundVideo: {
        ...StyleSheet.absoluteFillObject,
    },
    modal_close: {
        position: 'absolute',
        top: '6%',
        zIndex: 99999,
        right: '10%',
    },
    closeText: {
        fontSize: scale(30),
        color: '#fff',
    },
});
